
<template>
  <div class="app-container customer-div">
    <el-menu :default-active="tab" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="all">全部客户</el-menu-item>
<!--      <el-menu-item index="monthVisit">本月可拜访</el-menu-item>-->
      <el-menu-item index="repeat">复购客户</el-menu-item>
      <!-- <el-menu-item index="need">本周必须跟进</el-menu-item> -->
      <el-menu-item index="monthTracking">本月需跟进</el-menu-item>
      <el-menu-item index="60">60天未成交</el-menu-item>
<!--      <el-menu-item index="90">90天未成交</el-menu-item>-->
      <el-menu-item index="follow">跟进记录</el-menu-item>
      <el-menu-item index="seas">公海池</el-menu-item>
      <el-menu-item index="del">回收站</el-menu-item>
      <el-menu-item index="repeatList">客户查询</el-menu-item>
      <el-menu-item index="waitMove" v-if="departmentCirculationList">流转待分配</el-menu-item>
      <!-- <el-menu-item index="calendar">客户跟进日历</el-menu-item> -->
      <!-- <el-menu-item index="examine" v-if="customerCheck">客户审核</el-menu-item>-->
      <!-- <el-menu-item index="waitMyCheck">客户接收</el-menu-item>  -->
      <el-menu-item index="modifyReviewList">客户修改申请</el-menu-item>
      <el-menu-item index="focusOn">重点关注</el-menu-item>
    </el-menu>

    <!--数据列表-->
    <div class="table-container">
      <!--客户列表-->
      <customerList
      ref="customerList"
      v-if="tab=='all'||tab=='monthVisit'||tab=='need'||tab=='monthTracking'||tab=='60'||tab=='90'|| tab == 'focusOn'"
      :stepList="stepList"
      :areaList="areaList"
      :customerLevelList="customerLevelList"
      :goodsLineList="goodsLineList"
      :userOptionList="userOptionList"
      :customerQualityList="customerQualityList"
      :categoryList="categoryList"
      ></customerList>

      <!--跟进记录-->
      <followList ref="followList" v-if="tab=='follow'"></followList>

       <!-- 公海池 -->
      <publicList
      ref="publicList"
      v-if="tab=='seas'"
      :areaList="areaList"
      :goodsLineList="goodsLineList"
      :customerLevelList="customerLevelList"
      :userOptionList="userOptionList"
      :customerQualityList="customerQualityList"
      :categoryList="categoryList"
      ></publicList>

      <!-- 回收站 -->
      <delList
        ref="delList"
        v-if="tab=='del'"
        :customerStateList="customerStateList"
        :customerTypeList="customerTypeList"
        :customerQualityList="customerQualityList"
        :customerDegreeList="customerDegreeList"
        :customerTrackingList="customerTrackingList"
      ></delList>

      <!-- 客户查询 -->
      <cmsRepeatList ref="cmsRepeatList" v-if="tab=='repeatList'"></cmsRepeatList>

      <!-- 流转分配 -->
      <transferList
      ref="transferList"
      v-if="tab=='waitMove'"
      :stepList="stepList"
      :areaList="areaList"
      :customerLevelList="customerLevelList"
      :userOptionList="userOptionList"
      :goodsLineList="goodsLineList"
      :customerQualityList="customerQualityList">
      </transferList>

      <!--跟进日历-->
      <!-- <followCalendar ref="followCalendar" v-show="tab=='calendar'"></followCalendar> -->

      <!--客户修改申请-->
      <modifyReviewList ref="modifyReviewList" v-if="tab=='modifyReviewList'" :userOptionList="userOptionList"></modifyReviewList>

      <!--复购客户-->
      <repeatList ref="repeatList" v-if="tab=='repeat'"
                  :userOptionList="userOptionList"
                  :areaList="areaList"
                  :customerQualityList="customerQualityList"
                  :categoryList="categoryList"></repeatList>

    </div>

  </div>
</template>
<script>
import store from '@/store'
import followList from './components/followList'
import customerList from './components/customerList'
import publicList from './components/publicList.vue'
import delList from './components/delList.vue'
import cmsRepeatList from './components/cmsRepeatList.vue'
import transferList from './components/transferList.vue'
import modifyReviewList from './components/modifyReviewList.vue'
import repeatList from './components/repeatList.vue'
import { mapGetters } from 'vuex'
import {
  getAddressList,
  getCustomerSetting,
  getOrderUsersList
} from '@/api/partner';
import {
  getDevelopStepListAPI
} from '@/api/fms';
import {getCustomerInfoAPI,getCategoryList} from '@/api/company'
export default {
  name: "allCustomForFollow",
  data(){
    return {
      roles:store.getters.roles ? store.getters.roles : [],
      tab: 'all',
      areaList: [],//地区
      customerLevelList: [],//客户等级
      userOptionList: [],//负责人
      goodsLineList: [],//产品线
      customerQualityList: [],//客户性质
      customerStateList: [],//客户状态
      customerTypeList: [],//客户分类
      customerDegreeList: [],//月毛利区间
      customerTrackingList: [],//跟进状态
      stepList:[],//跟进阶段
      categoryList:[]
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
    customerCheck(){
      if(this.roles.indexOf("customerCheck") != -1){
        return true
      }else{
        return false
      }
    },
    departmentCirculationList() {
      if(this.roles.indexOf("departmentCirculationList") != -1){
        return true
      }else{
        return false
      }
    }
  },
  components : {
    followList,
    customerList,
    publicList,
    delList,
    cmsRepeatList,
    transferList,
    modifyReviewList,
    repeatList
    // followCalendar,
  },
  created() {
    this.getAddressListData()
    this.getCustomerInfo()
    this.getCustomerSettingList()
    this.getUserOptionListData()
    this.getStepList()
    this.getcategoryListFn()
    if(this.$route.query.tab){
      this.handleSelect(this.$route.query.tab)
    }else {
      this.$nextTick(() => {
        // dom元素更新后执行，因此这里能正确打印更改之后的值
        setTimeout(() => {
          this.$refs.customerList.init(this.tab, 'all');
        })
      })
    }
  },
  mounted() {

  },

  filters: {


  },

  methods: {
    //获取品类列表
    getcategoryListFn(){
      getCategoryList().then((res)=>{
        this.categoryList = res.list
      })
    },
    //获取开发阶段
    getStepList(){
      getDevelopStepListAPI({pageNum:1,pageSize: 1000,isEnable:1,sort:'asc'}).then((res)=>{
        this.stepList = res.list
      })
    },
    //获取员工下拉选项
    getUserOptionListData(){
      getOrderUsersList({status:1}).then((res)=>{
        this.userOptionList = res;
      })
    },
   //获取客户配置 产品线
    getCustomerSettingList(){
      getCustomerSetting().then((res)=>{
        res.forEach((el)=>{
          if(el.cdtCode == 'goods_line'){//产品线
            this.goodsLineList = el.data
          }else if (el.cdtCode == 'customer_quality') {//客户性质
            this.customerQualityList = el.data;
          }else if(el.cdtCode == 'customer_state'){//客户状态
            this.customerStateList = el.data
          }else if(el.cdtCode == 'customer_type'){//客户分类
            this.customerTypeList = el.data;
          }else if(el.cdtCode == 'customer_degree'){//月毛利区间
            this.customerDegreeList = el.data;
          }else if(el.cdtCode == 'customer_tracking'){//跟进状态
            this.customerTrackingList = el.data;
          }
        });
      })
    },
       //获取客户信息
    getCustomerInfo(){
      getCustomerInfoAPI({ tab: 3 }).then((res) => {
        this.customerLevelList = res;
      })
    },
     //获取省市区列表
    getAddressListData(){
      getAddressList().then((res)=>{
        this.areaList = res;
      })
    },
    /**
     * 切换选择状态
     */
    handleSelect(key, keyPath) {
      this.tab = key;
      if(key == 'all' || key=='monthVisit' || key == 'need'|| key=='monthTracking' || key == '60'|| key == '90' || key == 'focusOn'){
        this.$nextTick(() => {
          // dom元素更新后执行，因此这里能正确打印更改之后的值
          setTimeout(()=>{
            this.$refs.customerList.init(this.tab,'all');
          })
        })
      }else if(key == 'follow'){
        this.$nextTick(() => {
          // dom元素更新后执行，因此这里能正确打印更改之后的值
          setTimeout(()=>{
            this.$refs.followList.init('all');
          })
        })
      }else if(key == 'seas'){
        this.$nextTick(() => {
          // dom元素更新后执行，因此这里能正确打印更改之后的值
          setTimeout(()=>{
            this.$refs.publicList.init(this.tab,'all');
          })
        })
      }else if(key == 'del'){
        this.$nextTick(() => {
          setTimeout(()=>{
            this.$refs.delList.init(this.tab);
          })
        })
      }else if(key == 'repeatList') {
        this.$nextTick(() => {
          // dom元素更新后执行，因此这里能正确打印更改之后的值
          setTimeout(()=>{
            this.$refs.cmsRepeatList.init(this.tab);
          })
        })
      }else if(key=='waitMove'){
        this.$nextTick(() => {
          // dom元素更新后执行，因此这里能正确打印更改之后的值
          setTimeout(()=>{
            this.$refs.transferList.init(this.tab,'all');
          })
        })
      }else if (key == 'modifyReviewList') {
        this.$nextTick(() => {
          setTimeout(()=>{
            this.$refs.modifyReviewList.init('all');
          })
        })
      }else if(key == 'repeat'){
        this.$nextTick(() => {
          // dom元素更新后执行，因此这里能正确打印更改之后的值
          setTimeout(()=>{
            this.$refs.repeatList.init('all');
          })
        })
      }
      // else if(key == 'calendar'){
      //   this.$nextTick(() => {
      //     setTimeout(()=>{
      //       this.$refs.followCalendar.init('all');
      //     })
      //   })
      // }
    },
  },
}
</script>

<style  lang="scss">



</style>
